<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <input type="text" id="inp">
        <p id="reg"></p>
        <p id="rs"></p>
    </div>
    <script>
        function $(el){
           return document.querySelector(el)
        }
        let inp=$('#inp'),
            reg = $('#reg'),
            rs=$('#rs')
        inp.addEventListener('blur',(e)=>{
            let val=inp.value,
                reg1 = /^http(s)?\/\/:(www\.)?\w+\.(com|cn|con|cet)(\?(&?[\w]+=[\w\u4e00-\u9fa5]+)*)?$/,
                // reg2 = /^http(s)?:\/\/(www\.)?[a-z\d]+\.(com|cn|com.cn|net|org)(\?(&?[\w]+=[\w\u4e00-\u9fa5]+)*)?$/
                // \/\/:(www\.)?[a-z0-9]+\.(com,cn,con,cet)(\?(+=+(&+=+)*))?
                res=val.match(reg1)
            reg.innerHTML=reg1
            rs.innerHTML=trim(val).length
        })
        // 驼峰写法
        // let str = 'get-element-by-id',
        //     newstr = str.replace(/-([a-z])/g,($0,$1)=>{
        //         // return $0.substr(1).toUpperCase()
        //         return $1.toUpperCase()
        //     })
        // console.log(newstr)
        // 清除输入框前后端空格
        let ltrim = (str)=>str.replace(/^\s*/,''),
            rtrim = (str)=>str.replace(/\s*$/,''),
            trim = (str) =>str.replace(/(^\s*)|(\s*$)/g,'')
        
    </script>
</body>
</html>